<template>
  <div>
 <Cheader></Cheader>
 <Csearch :cities="cities"></Csearch>
 <Clist :hot="hotCities" :cities="cities" :letter="letter"></Clist>
 <Aleader :cities="cities" @changeLeader="handeleClickchange"></Aleader>
  </div>
</template>

<script>
import axios from "axios";
import Cheader from "./compoents/header";
import Csearch from "./compoents/search";
import Clist from "./compoents/list";
import Aleader from "./compoents/Aleader";
export default {
  name: "City",
  components: {
    Cheader,
    Csearch,
    Clist,
    Aleader
  },
  data() {
    return {
      hotCities: [],
      cities: {},
      letter: ""
    };
  },
  methods: {
    getCityinfo() {
      axios.get("/api/city.json").then(this.handleGetSucc);
    },
    handleGetSucc(res) {
      res = res.data;
      console.log(res);
      if (res.ret && res.data) {
        const data = res.data;
        this.cities = data.cities;
        this.hotCities = data.hotCities;
      }
    },
    handeleClickchange(letter) {
      // 将父组件接收到的letter传给data对象，再通过绑定属性传给list组件
      this.letter = letter;
      //console.log(letter);
    }
  },
  mounted() {
    this.getCityinfo();
  }
};
</script>

<style lang="stylus" scoped>
</style>